<script setup>

import { ref, reactive } from 'vue'
let loginUser = reactive({
    username: '',
    userPwd: ''
})

let usernameMsg = ref('')
let userPwdMsg = ref('')

function checkUsername() {
    //定义正则
    var usernameReg = /^[a-zA-Z0-9]{5,16}$/;
    //校验用户名
    if (!usernameReg.test(loginUser.username)) {
        usernameMsg.value = '用户名格式不正确，请输入5-16位字母或数字！'
        return false
    }
    usernameMsg.value = '√'
    return true
}
function checkUserPwd() {
    //定义正则
    var userPwdReg = /^[a-zA-Z0-9]{6,20}$/;
    //校验密码
    if (!userPwdReg.test(loginUser.userPwd)) {
        userPwdMsg.value = '密码格式不正确，请输入6-20位字母或数字！'
        return false
    }
    userPwdMsg.value = '√'
    return true
}

// 登录校验（需同时满足账号和密码格式正确）
function handleLogin() {
    // 先执行两次校验，确保用户未失焦时也能触发检查
    const isUsernameValid = checkUsername();
    const isPwdValid = checkUserPwd();
    
    if (isUsernameValid && isPwdValid) {
        alert('登录信息校验通过，可执行后续接口请求！');
        // 此处可添加真实登录接口请求逻辑（如axios.post）
    }
}

function handleReset() {
    loginUser.username = '';
    loginUser.userPwd = '';
    usernameMsg.value = '';
    userPwdMsg.value = '';
}

</script>

<template>
  <div class="login-wrapper">
    <div class="login-card">
      <h3 class="login-title">用户登录</h3>
      
      <!-- 表单区域 --> 
      <form class="login-form">
        <div class="form-item">
          <label class="form-label">账号</label>
          <input 
            type="text" 
            class="form-input"
            v-model="loginUser.username" 
            @blur="checkUsername()" 
            @input="checkUsername()"
            placeholder="请输入5-16位字母或数字"
          >
          <span class="form-message" :class="{error: usernameMsg !== 'ok', success: usernameMsg === 'ok'}">
            {{ usernameMsg }}
          </span>
        </div>

        <div class="form-item">
          <label class="form-label">密码</label>
          <input 
            type="password" 
            class="form-input"
            v-model="loginUser.userPwd" 
            @blur="checkUserPwd()" 
            @input="checkUserPwd()"
            placeholder="请输入6-20位字母或数字"
          >
          <span class="form-message" :class="{error: userPwdMsg !== 'ok', success: userPwdMsg === 'ok'}">
            {{ userPwdMsg }}
          </span>
        </div>

        <!-- 按钮和注册链接区域 -->
        <div class="form-actions">
          <button type="button" class="btn login-btn" @click="handleLogin()">登录</button>
          <button type="button" class="btn reset-btn" @click="handleReset()">重置</button>
          <router-link to="/regist" class="register-link">
            还没有账号？点此注册
          </router-link>
        </div>
      </form>
    </div>
  </div>
</template>

<style scoped>
/* 外层容器：全屏居中 */
.login-wrapper {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f7fa; /* 淡灰色背景，提升层次感 */
  padding: 20px;
  box-sizing: border-box;
}

/* 登录卡片：白色背景+阴影+圆角 */
.login-card {
  width: 100%;
  max-width: 420px; /* 最大宽度限制，适配不同屏幕 */
  background-color: #ffffff;
  border-radius: 12px; /* 圆润边角，更精致 */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); /* 柔和阴影，不刺眼 */
  padding: 36px;
  box-sizing: border-box;
}

/* 标题样式 */
.login-title {
  font-size: 22px;
  font-weight: 600;
  color: #1d2129;
  text-align: center;
  margin: 0 0 30px;
  letter-spacing: 0.5px;
}

/* 表单样式 */
.login-form {
  width: 100%;
}

/* 表单项容器 */
.form-item {
  margin-bottom: 24px;
  position: relative;
}

/* 标签样式 */
.form-label {
  display: block;
  font-size: 14px;
  color: #4e5969;
  margin-bottom: 8px;
  font-weight: 500;
}

/* 输入框样式 */
.form-input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid #d1d5db;
  border-radius: 6px; /* 小圆角，适配输入框 */
  font-size: 14px;
  color: #1d2129;
  box-sizing: border-box;
  transition: border-color 0.2s ease; /* 边框颜色过渡，更细腻 */
}

/* 输入框交互：聚焦时高亮 */
.form-input:focus {
  outline: none;
  border-color: #409eff; /* 淡蓝色高亮，不刺眼 */
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1); /* 内阴影，增强聚焦感 */
}

/* 提示信息样式 */
.form-message {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  height: 16px; /* 固定高度，避免布局跳动 */
}

/* 错误提示颜色 */
.error {
  color: #f56c6c; /* 柔和红色，不刺眼 */
}

/* 成功提示颜色 */
.success {
  color: #67c23a; /* 柔和绿色，不刺眼 */
}

/* 按钮和链接区域 */
.form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
}

/* 按钮基础样式 */
.btn {
  padding: 0 20px;
  height: 44px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease; /* 过渡效果，更细腻 */
  border: none;
}

/* 登录按钮样式 */
.login-btn {
  background-color: #409eff;
  color: #ffffff;
}

/* 登录按钮 hover 效果 */
.login-btn:hover {
  background-color: #3391e8; /* 加深一点，反馈明显 */
}

/* 重置按钮样式 */
.reset-btn {
  background-color: #ffffff;
  color: #4e5969;
  border: 1px solid #d1d5db;
}

/* 重置按钮 hover 效果 */
.reset-btn:hover {
  background-color: #f5f7fa; /* 淡灰色背景，反馈明显 */
}

/* 注册链接样式 */
.register-link {
  font-size: 12px;
  color: #409eff;
  text-decoration: none;
  transition: color 0.2s ease;
}

/* 注册链接 hover 效果 */
.register-link:hover {
  color: #3391e8;
  text-decoration: underline; /* 下划线，增强交互感 */
}
</style>
